<template>
    <div>
        <div class="blogInfoSum">
            <el-badge :value="blogInfo.arTotal" class="item" type="primary">
                <el-button size="small">文章总数</el-button>
            </el-badge>
            <el-badge :value="blogInfo.arCountMonth" class="item" type="primary">
                <el-button size="small">月文章数</el-button>
            </el-badge>
            <el-badge :value="blogInfo.arCountWeek" class="item" type="primary">
                <el-button size="small">周文章数</el-button>
            </el-badge>
            <el-badge :value="blogInfo.pvPageViews" class="item2" type="success">
                <el-button size="small">文章浏览量总数</el-button>
            </el-badge>
            <el-badge :value="blogInfo.pageViewMonth" class="item2" type="success">
                <el-button size="small">月浏览量数</el-button>
            </el-badge>
            <el-badge :value="blogInfo.pageViewWeek" class="item2" type="success">
            <el-button size="small">周浏览量数</el-button>
        </el-badge>
        </div>
<!--        <el-divider></el-divider>-->
        <div style="display: inline; float: left; width: 48%; border: #3b4151 solid 1px">
            <ve-line :data="chartData"  height="400px"></ve-line>
<!--            <ve-histogram :data="chartData"  height="400px"></ve-histogram>-->
        </div>
        <div style="display: inline;float: right; width: 48%; border: #3b4151 solid 1px">
            <ve-pie :data="chartData" height="400px"></ve-pie>
<!--            <ve-radar :data="chartData" height="400px"></ve-radar>-->
        </div>
    </div>
</template>

<script>
    export default {
        name: "aContent",
        data(){
            return{
                pageViewSeven : [],
                blogInfo:{
                    arTotal : 0,
                    arCountMonth : 0,
                    arCountWeek : 0,
                    pvPageViews : 0,
                    pageViewMonth : 0,
                    pageViewWeek : 0
                },
                chartData: {
                    columns: ['date', '浏览量'],
                    rows: [
                        { 'date': '01-10', '浏览量': 10},
                        { 'date': '01-11', '浏览量': 20},
                        { 'date': '01-12', '浏览量': 30},
                        { 'date': '01-13', '浏览量': 40},
                        { 'date': '01-14', '浏览量': 50},
                        { 'date': '01-15', '浏览量': 60},
                        { 'date': '01-16', '浏览量': 70}
                    ]
                }
            }
        },
        methods:{
            init(){
                // 获取信息
                this.getRequest('/admin/info/').then(resp => {
                    if(resp){
                        this.pageViewSeven = resp.obj.pageViewSeven;
                        this.blogInfo.arTotal = resp.obj.arTotal;
                        this.blogInfo.arCountMonth = resp.obj.arCountMonth;
                        this.blogInfo.arCountWeek = resp.obj.arCountWeek;
                        this.blogInfo.pvPageViews = resp.obj.pvPageViews;
                        this.blogInfo.pageViewMonth = resp.obj.pageViewMonth;
                        this.blogInfo.pageViewWeek = resp.obj.pageViewWeek;
                        this.initChar();
                    }
                })
            },
            initChar(){
                for(let index in this.pageViewSeven){
                    this.chartData.rows[index].date = this.pageViewSeven[index].pvDate;
                    this.chartData.rows[index].浏览量 = this.pageViewSeven[index].pageView;
                }
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style>
    .blogInfoSum{
        margin : 10px 0px;
    }
    .blogInfoSum .item {
        margin-top: 10px;
        margin-right: 40px;
    }
    .blogInfoSum .item2 {
        margin-top: 10px;
        margin-right: 50px;
    }
</style>